<template>
	<div class="login-register">
		<div class="contain">
			<!-- 登录与注册功能 -->
			<div class="big-box" :class="{ active: isLogin }">
				<div class="big-contain" key="bigContainLogin" v-if="isLogin">
					<div class="btitle">账户登录</div>
					<div class="bform01">

						<el-form ref="ruleFormRef" :model="form" status-icon :rules="rules"
							@keyup.enter.native="submitForm(ruleFormRef)">
							<el-form-item prop="username">
								<el-input v-model="form.username" type="text" autocomplete="off" minlength="5"
									maxlength="15" placeholder="用户名" class="bform_input" />
							</el-form-item>
							<el-form-item prop="userpwd">
								<el-input v-model="form.userpwd" type="password" autocomplete="off" minlength="8"
									maxlength="15" placeholder="密码" class="bform_input" />
							</el-form-item>
						</el-form>
					</div>
					<button class="bbutton" :disabled="btnbool" @click="login">登录</button>
				</div>

				<div class="big-contain" key="bigContainRegister" v-else>
					<div class="btitle">创建账户</div>
					<div class="bform">
						<el-form ref="ruleFormRef" :model="form" status-icon :rules="rules"
							@keyup.enter.native="submitForm(ruleFormRef)">
							<el-form-item prop="username">
								<el-input v-model="form.username" type="text" autocomplete="off" minlength="5"
									maxlength="15" placeholder="用户名" class="bform_input" />
							</el-form-item>
							<el-form-item prop="userpwd">
								<el-input v-model="form.userpwd" type="password" autocomplete="off" minlength="8"
									maxlength="15" placeholder="密码" class="bform_input" />
							</el-form-item>
							<el-form-item prop="user_againpwd">
								<el-input v-model="form.user_againpwd" type="password" autocomplete="off" minlength="8"
									maxlength="15" placeholder="重复密码" class="bform_input" />
							</el-form-item>
							<el-form-item prop="useremail">
								<el-input v-model="form.useremail" type="email" autocomplete="off" minlength="8"
									maxlength="30" placeholder="邮箱" class="bform_input" />
							</el-form-item>
						</el-form>
					</div>
					<button class="bbutton" :disabled="btnbool" @click="register">注册</button>
				</div>
			</div>
			<!-- 登录与注册页面切换 -->
			<div class="small-box" :class="{ active: isLogin }">

				<div class="small-contain" key="smallContainRegister" v-if="isLogin">
					<div class="stitle">你好，朋友!</div>
					<p class="scontent">去注册一个账号，和我们一起旅行！</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>

				<div class="small-contain" key="smallContainLogin" v-else>
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">已经有账号了嘛，请登录你的账户!</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, provide } from 'vue';
import { useRouter } from "vue-router";
import * as ck from "../utils/verfifaction.js"
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
import Usemd5 from "../hook/index.js";
import { FormInstance, FormRules, ElMessage } from 'element-plus'
//pinia本地存储
import { useUserStore } from "../store/UserStore";
import { storeToRefs } from "pinia";
const UserStore = useUserStore();
let { Login_state } = storeToRefs(UserStore)

let router = useRouter()
const isLogin = ref(true)

const form = reactive({
	username: '',
	useremail: '',
	userpwd: '',
	user_againpwd: '',
})


// //打印接口地址
// onMounted(() => {
// 	console.log(process.env.VUE_APP_API)
// })

// 点击切换登录或注册页
let changeType = () => {
	isLogin.value = !isLogin.value
	form.username = ''
	form.useremail = ''
	form.userpwd = ''
	form.user_againpwd = ''
}

const ruleFormRef = ref<FormInstance>()
//对输入框的格式要求
const validatename = (rule: any, value: any, callback: any) => {
	if (!value) {
		return callback(new Error('用户名不能为空'))
	} else if (ck.verifyName(value)) {
		return callback(new Error('用户名格式错误! 用户名应为4-12个字符'))
	}
	else {
		callback()
	}
}
const validatePass = (rule: any, value: any, callback: any) => {
	if (!value) {
		return callback(new Error('密码不能为空！'))
	} else if (ck.verifyPasswd(value)) {
		return callback(new Error('密码格式错误! 密码 至少6个字符,至少1个大写字母,1个小写字母和1个数字,不能包含特殊字符（非数字字母)'))
	}
	else {
		callback()
	}
}
const validatePass2 = (rule: any, value: any, callback: any) => {
	// 因为登录没有重复密码的校验，所以登录页面时取消重复密码的校验
	if (isLogin.value == true) {
		callback()
	}
	if (!value) {
		return callback(new Error('重复密码不能为空！'))
	} else if (value !== form.userpwd) {
		return callback(new Error('两次密码不相同！'))
	}
	else {
		callback()
	}
}
const validatemailbox = (rule: any, value: any, callback: any) => {
	if (isLogin.value == true) {
		callback()
	}
	if (!value) {
		return callback(new Error('邮箱不能为空！'))
	} else if (ck.verifyEmile(value)) {
		callback(new Error('邮箱格式错误！'))
	} else {
		callback()
	}
}

//判断当前页面输入框是否有值
let btnbool = ref(true)
watch(form, (newval: any, oldval: any) => {
	if (isLogin.value == true) {
		if (newval.username != "" && newval.userpwd != "") {
			btnbool.value = false
		} else {
			btnbool.value = true
		}
	} else {
		if (newval.username != "" && newval.userpwd != "" && newval.user_againpwd != "" && newval.useremail != "") {
			btnbool.value = false
		} else {
			btnbool.value = true
		}
	}
})

//设置触发方式，失去焦点触发
const rules = reactive<FormRules<typeof form>>({
	username: [{ validator: validatename, trigger: 'blur' }],
	userpwd: [{ validator: validatePass, trigger: 'blur' }],
	user_againpwd: [{ validator: validatePass2, trigger: 'blur' }],
	useremail: [{ validator: validatemailbox, trigger: 'blur' }],
})


let id = '';
//登录方法
let login = () => {
	Link(apiurl.login, "POST", { name: form.username, password: form.userpwd }).then((ok: any) => {
		console.log(ok)
		ElMessage({
			message: '登录成功',
			type: 'success',
		})
		const message = document.querySelector('.el-message__content')?.parentNode
		//判断提示框的数量   
		if (document.getElementsByClassName('el-message__content').length > 1) {
			setTimeout(function () {
				message.parentNode.removeChild(message);
			}, 100)
		}

		UserStore.useremail = ok.email
		UserStore.username = ok.username
		UserStore.usersex = ok.sex
		UserStore.useraddress = ok.address
		UserStore.usertype = ok.type
		UserStore.userphone = ok.phone
		UserStore.userId = ok.numberId
		UserStore.id = ok.id

		Login_state.value = true;
		router.push("/main")
	}
	)
}

//注册方法
let register = () => {
	let data = {
		name: form.username,
		password: form.userpwd,
		email: form.useremail,
		againPwd: form.user_againpwd,
	}
	console.log(data);

	Link(apiurl.register, "POST", data).then((data: any) => {
		console.log(data);
		ElMessage({
			message: '注册成功，请去登录',
			type: 'success',
		})
		const message = document.querySelector('.el-message__content')?.parentNode
		//判断提示框的数量   
		if (document.getElementsByClassName('el-message__content').length > 1) {
			setTimeout(function () {
				message.parentNode.removeChild(message);
			}, 100)
		}
		isLogin.value = true
	})



}


</script>

<style scoped="scoped">
.login-register {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background: url("http://101.42.51.171:9000/smart/image/background.png")no-repeat top center;
	background-size: cover;
	background-color: #b8e5f8;
}

.contain {
	width: 60%;
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ecf0f3;
	border-radius: 20px;
	box-shadow: 0 0 3px #f0f0f0,
		0 0 6px #f0f0f0;
}

.big-box {
	width: 70%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 30%;
	transform: translateX(0%);
	transition: all 1s;
}

.big-contain {
	width: 100%;
	height: 100%;
	display: flex;
	background: #ecf0f3;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6; */
}

.btitle {
	font-size: 1.5em;
	font-weight: bold;
	color: #181818;
}

.bform {
	width: 100%;
	height: 70%;
	padding: 2em 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.bform01 {
	width: 100%;
	height: 40%;
	padding: 2em 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.bform .errTips {
	display: block;
	width: 50%;
	text-align: left;
	color: red;
	font-size: 0.7em;
	margin-left: 1em;
}

.bform input {
	width: 50%;
	height: 30px;
	border: none;
	outline: none;
	border-radius: 10px;
	padding-left: 2em;
	background-color: #ecf0f3;
}

.bbutton {
	width: 20%;
	height: 40px;
	border-radius: 24px;
	border: none;
	outline: none;
	background-color: #4B70E2;
	color: #fff;
	font-size: 0.9em;
	cursor: pointer;
}

.small-box {
	display: flex;
	width: 30%;
	height: 100%;
	background: #ecf0f3;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(0%);
	transition: all 1s;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
	box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
}

.small-contain {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.stitle {
	font-size: 1.5em;
	font-weight: bold;
	color: #181818;
}

.scontent {
	font-size: 0.8em;
	color: #a0a5a8;
	text-align: center;
	padding: 2em 4em;
	line-height: 1.7em;
}

.sbutton {
	width: 60%;
	height: 40px;
	border-radius: 24px;
	border: 1px solid #fff;
	outline: none;
	background-color: #4B70E2;
	color: #fff;
	font-size: 0.9em;
	cursor: pointer;
}

.big-box.active {
	left: 0;
	transition: all 0.5s;
}

.small-box.active {
	left: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
	transform: translateX(-100%);
	transition: all 1s;
}

.bform_input {
	width: 350px;
	height: 40px;
	margin: 4px 0;
	padding-left: 1px;
	font-size: 13px;
	letter-spacing: 0.15px;
	border: none;
	outline: none;
	background-color: #ecf0f3;
	transition: 0.25s ease;
	border-radius: 8px;
	/* box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9; */
}

.el-form-item {
	display: flex;
	--font-size: 14px;
	margin-bottom: 25px;
}
</style>
